<template>
  <div class="markdown-editor">
    <div class="editor-container">
      <div class="editor-section">
        <h3>编辑器</h3>
        <div ref="editorRef" class="editor"></div>
      </div>
      
      <div class="preview-section">
        <h3>预览</h3>
        <div class="preview" v-html="previewHtml"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { EditorView, basicSetup } from 'codemirror'
import { EditorState } from '@codemirror/state'
import { markdown } from '@codemirror/lang-markdown'
import { marked } from 'marked'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.min.css'

const editorRef = ref(null)
const editorView = ref(null)
const content = ref('# Hello Markdown Editor\n\n这是一个 **Markdown** 编辑器示例。\n\n## 功能特性\n- ✅ 实时编辑\n- ✅ 即时预览\n- ✅ Markdown语法高亮\n- ✅ 响应式布局\n\n```javascript\nconsole.log("Hello, Markdown!")\n```')
const previewHtml = ref('')

// 初始化编辑器
const initEditor = () => {
  if (!editorRef.value) return
  
  const state = EditorState.create({
    doc: content.value,
    extensions: [
      basicSetup,
      markdown(),
      EditorView.updateListener.of((update) => {
        if (update.docChanged) {
          content.value = update.state.doc.toString()
        }
      })
    ]
  })
  
  editorView.value = new EditorView({
    state,
    parent: editorRef.value
  })
}

// 配置marked支持代码高亮
marked.setOptions({
  highlight: function(code, lang) {
    const language = hljs.getLanguage(lang) ? lang : 'plaintext'
    return hljs.highlight(code, { language }).value
  },
  langPrefix: 'hljs language-'
})

// 更新预览
const updatePreview = () => {
  previewHtml.value = marked(content.value)
}

// 监听内容变化
watch(content, updatePreview, { immediate: true })

onMounted(() => {
  initEditor()
})

onUnmounted(() => {
  if (editorView.value) {
    editorView.value.destroy()
  }
})
</script>

<style scoped>
.markdown-editor {
  height: 100vh;
  padding: 0;
}

.editor-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  height: 600px;
}

.editor-section, .preview-section {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: #000000;
}

.editor-section h3, .preview-section h3 {
  margin: 0;
  padding: 1rem;
  background: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
  font-size: 1.1rem;
  font-weight: 600;
}

.editor {
  flex: 1;
  overflow: auto;
}

.preview {
  flex: 1;
  padding: 1rem;
  overflow: auto;
  background: #ffffff;
  color: #333333;
}

/* CodeMirror 样式调整 */
:deep(.cm-editor) {
  height: 100%;
  font-size: 14px;
}

:deep(.cm-content) {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* 预览区域样式 */
.preview h1 {
  border-bottom: 2px solid #1976d2;
  padding-bottom: 0.3em;
}

.preview h2 {
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

.preview code {
  background: #f6f8fa;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.preview pre {
  background: #f6f8fa;
  padding: 1em;
  border-radius: 6px;
  overflow: auto;
}

.preview pre code {
  background: none;
  padding: 0;
}

.preview blockquote {
  border-left: 4px solid #1976d2;
  padding-left: 1em;
  margin-left: 0;
  color: #6a737d;
  background: #f8f9fa;
  padding: 1em;
}

@media (max-width: 768px) {
  .editor-container {
    grid-template-columns: 1fr;
    height: 800px;
  }
}
</style>